<template>
    <div>
        <el-card style="text-align: center;">
<!--            <el-input class="in1" v-model="queryForm.account" clearable placeholder="title">-->
<!--                <template #append>-->
<!--                    <el-button icon="Search" @click="queryByAccount"></el-button>-->
<!--                </template>-->
<!--            </el-input>-->
            <el-table :data="tableData" border>
                <el-table-column prop="uid" label="ID"/>
                <el-table-column prop="username" label="昵称"/>
                <el-table-column prop="email" label="邮箱"/>
                <el-table-column prop="telephone" label="手机号"/>
                <el-table-column prop="avatar" label="头像">
                    <template #default="scope">
                        <img :src="`http://127.0.0.1:8081/avatar/${scope.row.avatar}`" alt="" height="30">
                    </template>
                </el-table-column>
                <el-table-column prop="dob" label="dob"/>
            </el-table>
        </el-card>
    </div>

</template>

<script setup>

import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import userApi from '../../api/user.js'
import router from '../../router/index.js'
import productApi from "../../api/product.js";

onMounted(() => {
    queryAll()
})
const tableData = ref([]
)
const queryAll = async () => {
    const res = await userApi.queryAll()
    tableData.value = res.data
}


</script>

<style scoped>

</style>